import React, { useEffect, useState } from 'react'
import request from "../../../api/request"
import "../../../api/Data"
import { useDispatch, useSelector } from "react-redux"
import { IMGTYPE } from "../../../types/router.d"
import * as api from "../../../actions/index"
import { GETIMGS, GETINFO, ALLSTATE } from "../../../types/store.d"
import { Grid, Image, Swiper, Search, Sticky } from 'react-vant';
import { ShopO } from '@react-vant/icons';
import Item from "../../../components/Item"
function Workbench() {
  const dispatch = useDispatch();
  const [imgarr, setImgarr] = useState<Array<IMGTYPE>>([])
  useEffect(() => {
    request.get("/api/info").then(res => {
      dispatch({
        type: GETINFO,
        payload: res.data.info
      })
    })

  }, [])
  useEffect(() => {
    request.get("/api/imgs").then(res => {
      dispatch({
        type: GETIMGS,
        payload: res.data.imgs
      })
      console.log(res.data.imgs, "====");
    })
  }, [])
  const imgArr = useSelector((state: ALLSTATE) => {
    return state.imgsArr;
  })
  const infoArr = useSelector((state: ALLSTATE) => {
    return state.infoArr;
  })
  const [value, setValue] = useState('');
  return (
    <div className="workbench">
      <Sticky>
        <Search
          shape="round"
          value={value}
          onChange={setValue}
          placeholder="请输入搜索关键词"
        />
      </Sticky>
      <div className="demo-swiper">
        <Swiper autoplay={3000}>
          {imgArr.map((item, index) => (
            <Swiper.Item key={index}>
              <Image lazyload src={item.img} />
            </Swiper.Item>
          ))}
        </Swiper>
      </div>
      <Grid border={false} columnNum={2}>
        {
          infoArr.map((item, index) => {
            return <Grid.Item key={index}>
              <Item dataScrop={item}></Item>

            </Grid.Item>
          })
        }
      </Grid>

    </div>
  )
}

export default Workbench